<template>
  <div class="upms-login">
    <div class="upms-login-header">
      <div class="h2">通用权限管理系统|用户登陆</div>
    </div>
    <div class="upms-login-content" :style="{height:height+'px'}">
      <a-form class="login-form">
        <div style="height: 50px; line-height: 50px; font-size: 24px; text-align: center;">用户登陆</div>
        <a-form-item class="form-item">
          <a-input
              size="large"
              type="text"
              placeholder="账户: 15739575703"
              v-model="loginParm.username"
              v-decorator="[
                'username',
                {rules: [{ required: true, message: '请输入帐户名' }, { validator: handleUsernameOrEmail }], validateTrigger: 'change'}
              ]">
            <a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }"/>
          </a-input>
        </a-form-item>
        <a-form-item class="form-item">
          <a-input
              size="large"
              type="password"
              autocomplete="false"
              placeholder="密码: 1234567aA."
              v-model="loginParm.password"
              v-decorator="[
                'password',
                {rules: [{ required: true, message: '请输入密码' }], validateTrigger: 'blur'}
              ]"
          >
            <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }"/>
          </a-input>
        </a-form-item>
        <a-form-item class="form-item">
          <a-button
              style="width: 100%"
              size="large"
              type="primary"
              htmlType="submit"
              class="login-button"
              :loading="loginBtn"
              :disabled="loginBtn"
              @click="login"
          >登陆
          </a-button>
        </a-form-item>
        <a-form-item class="form-item">
          <a-button
              style="width: 100%"
              htmlType="submit"
              class="login-button"
              @click="register.visible = true"
          >注册
          </a-button>
        </a-form-item>
      </a-form>
    </div>
    <UpmsFooter></UpmsFooter>
    <a-modal v-model="modal.visible" title="修改密码">
      <a-form :form="modal.form">
        <a-form-item label="成员账号" :label-col="modal.labelCol" :wrapper-col="modal.wrapperCol">
          <a-input placeholder="请输入成员账号！"
                   v-decorator="['username', {rules: [{ required: true, message: '请输入成员账号！'}]}]"/>
        </a-form-item>
        <a-form-item label="旧密码" :label-col="modal.labelCol" :wrapper-col="modal.wrapperCol">
          <a-input placeholder="请输入旧密码！" type="password"
                   v-decorator="['password', {rules: [{ required: true, message: '请输入旧密码！'}]}]"/>
        </a-form-item>
        <a-form-item label="新密码" :label-col="modal.labelCol" :wrapper-col="modal.wrapperCol">
          <a-input placeholder="请输入新密码！" type="password"
                   v-decorator="['newPassword', {rules: [{ required: true, message: '请输入新密码！'}]}]"/>
        </a-form-item>
        <a-form-item label="确认密码" :label-col="modal.labelCol" :wrapper-col="modal.wrapperCol">
          <a-input placeholder="请输入确认密码！" type="password"
                   v-decorator="['confirmPassword', {rules: [{ required: true, message: '请输入确认密码！'}, {
              validator: compareToFirstPassword,
            }]}]"/>
        </a-form-item>
      </a-form>
      <template slot="footer">
        <a-button key="submit" type="primary" :loading="modal.loading" @click="updatePwdOk">
          确定
        </a-button>
        <a-button key="back" @click="modal.visible = false">取消</a-button>
      </template>
    </a-modal>
    <a-modal v-model="register.visible" title="注册用户">
      <a-form :form="register.form">
        <a-form-item label="手机号" :label-col="modal.labelCol" :wrapper-col="modal.wrapperCol">
          <a-input placeholder="请输入手机号！"
                   v-decorator="['telephone', {rules: [{ required: true, message: '请输入手机号！'}]}]"/>
        </a-form-item>
        <a-form-item label="密码" :label-col="modal.labelCol" :wrapper-col="modal.wrapperCol">
          <a-input placeholder="请输入密码！" type="password"
                   v-decorator="['password', {rules: [{ required: true, message: '请输入新密码！'}]}]"/>
        </a-form-item>
        <a-form-item label="确认密码" :label-col="modal.labelCol" :wrapper-col="modal.wrapperCol">
          <a-input placeholder="请输入确认密码！" type="password"
                   v-decorator="['confirmPassword', {rules: [{ required: true, message: '请输入确认密码！'}, {
              validator: registerCompareToFirstPassword,
            }]}]"/>
        </a-form-item>
      </a-form>
      <template slot="footer">
        <a-button key="submit" type="primary" :loading="register.loading" @click="registerOk">
          确定
        </a-button>
        <a-button key="back" @click="register.visible = false">取消</a-button>
      </template>
    </a-modal>
  </div>
</template>

<script>
  import UpmsFooter from './UpmsFooter'
  import Vue from 'vue'
  import {ACCESS_TOKEN, USER_INFO} from '../store/mutation-types'

  export default {
    name: 'Login',
    components: {
      UpmsFooter
    },
    data () {
      return {
        height: this.$store.state.screenHeight - 200,
        loginBtn: false,
        loginType: 'user',
        loginParm: {
          username: '15739575703',
          password: '1234567aA.'
        },
        modal: {
          labelCol: {span: 7},
          wrapperCol: {span: 12},
          form: this.$form.createForm(this),
          visible: false,
          loading: false
        },
        register: {
          form: this.$form.createForm(this),
          visible: false,
          loading: false
        }
      }
    },
    methods: {
      handleUsernameOrEmail (rule, value, callback) {
        const {state} = this
        const regex = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/
        if (regex.test(value)) {
          state.loginType = 0
        } else {
          state.loginType = 1
        }
        callback()
      },
      login () {
        let that = this
        this.http.post('upmsApi', '/user/login', {
          'imageCert': '111',
          'account': that.loginParm.username,
          // 'account': 'admin7',
          'password': that.loginParm.password
          // 'password': '1234567aA.'
        }).then((res) => {
          if (res.success) {
            Vue.ls.set(ACCESS_TOKEN, res.rows[0].accessToken)
            Vue.ls.set(USER_INFO, {infoRandom: res.rows[0].infoRandom})
            this.$store.dispatch('getUserInfo')
            this.$store.state.chatData.ChatData.initWebsocket()
          } else {
            if (res.code === '10001') {
              setTimeout(() => {
                this.model.form.setFieldsValue({
                  username: that.loginParm.username,
                  password: that.loginParm.password
                })
              }, 100)
              this.modal.visible = true
            }
          }
        })
      },
      // 新密码和确认密码校验
      compareToFirstPassword (rule, value, callback) {
        const form = this.modal.form
        if (value && value !== form.getFieldValue('newPassword')) {
          callback(new Error('新密码和确认密码不一致'))
        } else {
          callback()
        }
      },
      // 更新密码
      updatePwdOk () {
        this.modal.form.validateFields((err, values) => {
          if (!err) {
            console.log('Received values of form: ', values)
            this.http.post('upmsApi', '/user/updatePwdNoLogin', {
              account: values.username,
              password: values.password,
              newPassword: values.newPassword
            }).then((res) => {
              if (res.success) {
                this.$message.info('修改密码成功，请重新登陆！')
              }
              this.modal.visible = false
            })
          }
        })
      },
      // 新密码和确认密码校验
      registerCompareToFirstPassword (rule, value, callback) {
        const form = this.register.form
        if (value && value !== form.getFieldValue('password')) {
          callback(new Error('密码和确认密码不一致'))
        } else {
          callback()
        }
      },
      registerOk () {
        this.register.form.validateFields((err, values) => {
          if (!err) {
            this.http.post('upmsApi', '/user/register', {
              telephone: values.telephone,
              password: values.password
            }).then((res) => {
              if (res.success) {
                this.$message.info('注册成功，请登陆！')
                this.register.visible = false
              }
            })
          }
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .upms-login {
    height: 100%;
    font-size: 14px;
    background-color: #f5f5f6;

    .upms-login-header {
      font-size: 24px;
      height: 100px;
      line-height: 100px;
      background-color: #ffffff;

      .h2 {
        width: 60%;
        margin: 0 auto;
        text-align: left;
      }
    }

    .upms-login-content {
      width: 800px;
      min-height: 300px;
      margin: 0 auto;
      padding-top: 50px;;

      .login-form {
        width: 50%;
        float: right;
        background-color: #ffffff;
        height: 300px;

        .form-item {
          width: 80%;
          margin: 0 auto;
          margin-top: 10px;
        }
      }
    }
  }
</style>
